<template>
  <div class="personalrepair">
    <v-header :back-display="true">
      <div slot="title">设置个人信息</div>
    </v-header>

    <van-form @submit="onSubmit" v-show="isshow">
      <van-field label="头像" required :rules="[{ required: true, message:'请上传头像' }]" class="img-txt">
        <template #input>
          <van-uploader v-model="avatar" multiple :max-count="1" />
        </template>
      </van-field>

      <van-field
        v-model="list.username"
        label="用户名"
        required
        clearable
        maxlength="8"
        placeholder="请输入用户名"
        :rules="[{ required: true }]"
      />

      <van-field label="性别">
        <template #input>
          <van-radio-group v-model="list.sex" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-model="list.phone"
        label="手机号码"
        required
        clearable
        maxlength="11"
        placeholder="请输入手机号码"
        :rules="[{ pattern: /^1[3456789]\d{9}$/ }]"
        class="mt"
      />

      <van-field
        v-model="list.email"
        label="邮箱"
        clearable
        maxlength="20"
        placeholder="请输入邮箱"
        required
        :rules="[{ pattern: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/, required: true }]"
      />

      <van-field
        v-model="list.qq"
        label="QQ"
        clearable
        maxlength="12"
        placeholder="请输入QQ号码"
      />

      <van-field
        v-model="list.wx"
        label="微信号"
        clearable
        maxlength="20"
        placeholder="请输入微信号"
      />

      <van-field
        v-model="list.school"
        label="学校名称"
        clearable
        maxlength="20"
        placeholder="请输入学校名称"
        class="mt"
      />

      <van-field readonly clickable :value="list.addr" label="地区" placeholder="点击选择省 / 市 / 区" @click="showArea = true"/>
      <van-popup v-model="showArea" round position="bottom">
        <van-area :area-list="areaList" value="441324" @confirm="onConfirm" @cancel="showArea = false" />
      </van-popup>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">保 存</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import header from '@/components/main/header'
import api from '../../api/api'
import { areaList } from '../../utils/area'   // 引入省市区
import { Uploader, Form, Field, Button, RadioGroup, Radio, Popup, Area, Toast } from 'vant';

export default {
  name: 'personalrepair',
  components: {
    "v-header": header,
    [Uploader.name]: Uploader,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Popup .name]: Popup ,
    [Area .name]: Area ,
    [Toast .name]: Toast ,
  },

  data () {
    return {
      list:{       // 初始化list对象 否则报undefined
        username:'',
        sex:'',
        phone:'',
        email:'',
        qq:'',
        wx:'',
        school:'',
        addr:''
      },
      avatar:[{url:''}],
      areaList: areaList,
      showArea: false,
      isshow:false   // 页面不显示
    }
  },
  created () {
    this.getUesrInfo()
  },
  computed: {},
  methods: {
    // 获取用户登录信息
    //这个接口  要把头像放到data外面   因为vant的上传图片是个数组对象
    getUesrInfo(){
      Toast.loading({message: '加载中...', forbidClick: true});
      api.Personal().then(res=>{
        Toast.clear()
        this.isshow = true
        this.list = res.data
        this.avatar[0].url = res.avatar
        // console.log(this.list,res)
        this.list.avatar = this.avatar  // 往list对象里添加 avater属性
      }).catch(error=>{
        console.log(error)
      })
    },

    // 保存修改信息
    onSubmit() {
      console.log('提交设置个人信息: ', this.list);
      Toast.success('保存成功');
      setTimeout(()=>{
        this.$router.push({path:'/user'})
      },2000)
    },

    // 省市区选择器
    onConfirm(values) {
      this.list.addr = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(' ');
      this.showArea = false;
    },

  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.personalrepair{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  background-color: #f1f1f1;
}
.van-form,.mt{margin-top: 10px;}
.img-txt{align-items: center;}
.van-button--info {
  background-color: #ff8333;
  border-color: #ff8333;
  font-size: 16px;
}
/deep/.van-field__control{ text-align: right; justify-content: flex-end;}
/deep/.van-radio__icon--checked .van-icon {
  background-color: #ff8333;
  border-color: #ff8333;
}
.van-radio--horizontal { margin-right: 30px;}
.van-radio--horizontal:last-child { margin-right: 0;}

/deep/.van-uploader__preview {margin:0}
/deep/.van-uploader__preview-image {width: 48px;height: 48px;border-radius: 5px;}
/deep/.van-uploader__upload { width: 48px; height: 48px; margin: 0;border-radius: 5px;}
</style>
